<template>
    <div class="app-container">
        <div class='search-bar'>
            <div class="basic-Information">
                <el-row>
                    <el-col :span="24">
                        <p>用户信息</p>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <div>
                            <span>账号：</span>
                            <span>{{ list.userName }}</span>
                        </div>
                    </el-col>
                    <el-col :span="12">
                        <div>
                            <span>姓名：</span>
                            <span>{{ list.name }}</span>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <p>门禁授权</p>
                    </el-col>
                </el-row>
            </div>
            <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all node-key="id"
                :filter-node-method="filterNode" ref="tree" show-checkbox @check-change="handleCheckChange">
            </el-tree>
            <div style="margin-top: 30px; margin-left: 50px;">
            <el-button  type="primary" @click="saveUserPower">提交</el-button>
            <el-button  @click="cancel">取消</el-button>
        </div>
        </div>

    </div>
</template>
      
<script>
// import { getList } from '@/api/table'

import { getApiAccessPageList } from '@/api/Access'
import { saveUserAccessData, getUserAccessData } from '@/api/userPower'
import { checkPrimeSync } from 'crypto';

export default {
    data() {
        return {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            list: {},
        }
    },
    created() {
        this.list = this.$route.query.list;
        this.getList();
    },
    methods: {
        getList() {
            let data = {
                skipCount: 0,
                MaxResultCount: 999,
            };
            let children = [];
            getApiAccessPageList(data).then(res => {
                if (!res.error) {
                    res.items.forEach(item => {
                        children.push({ id: item.id, label: item.name, checked: false });
                    });
                    this.data = [{
                        id: 1,
                        label: "所有门禁",
                        children: children
                    }]
                    let params = {
                        userid: this.list.id
                    }
                    let tree = [];
                    getUserAccessData(params).then(res => {
                        if (res) {
                            res.forEach(item => {
                                children.forEach(cren => {
                                    if (cren.id == item.accessId) {
                                        tree.push({
                                            id: item.accessId,
                                            label: cren.label,
                                        });
                                    }
                                })
                            })
                            this.$refs.tree.setCheckedNodes(tree);
                        }
                    });
                }
            });
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        dialogDetermine() {

        },
        handleCheckChange(data, checked) {
            this.data.forEach(item => {
                item.children.forEach(iChildren => {
                    if (iChildren.id == data.id) {
                        iChildren.checked = checked;
                    }
                })
            })
        },
        saveUserPower() {
            let params = {
                userId: this.list.id
            };
            let accessId = [];
            let tempCount = 0;

            this.data.forEach(item => {
                item.children.forEach(iChildren => {
                    if (iChildren.checked == true) {
                        accessId[tempCount++] = iChildren.id;
                    }
                })
            });
            params.accessId = accessId;
            saveUserAccessData(params).then(res => {
                if (!res.error) {
                    this.$router.push({
                        path: "userPower"
                    })
                    this.$message.success("保存成功");
                }
            })
        },
        cancel() {
            this.$router.push({
                path: "userPower"
            })
        }
    }
}
</script>
      
<style lang="scss" scoped>
.main {
    margin: 0.2rem;
    padding: 0.2rem;
}

.search-bar {
    width: 30%;
    margin-bottom: .2rem;
    text-align: left;
    float: left;
    margin-left: 10%;
    margin-top: .4rem;

    .basic-Information {
        ::v-deep p {
            font-size: 26px;
            margin-top: .4rem;
        }

        ::v-deep span {
            font-size: 20px;
        }
    }

}

.block {
    margin-right: .2rem;
    float: right;
}

.input-width {
    width: 404px;
}

.move-right {
    margin-left: .5rem;
}
</style>
      